<template>
  <div class="list-wrapper">
    <div class="top">
      <el-input
          v-model="searchValue"
          style="width: 100%"
          placeholder="搜索对话···"
          :prefix-icon="Search"
      />

      <div class="chart-list">
        <div class="chart-item" v-for="(item,index) in filterList"
             :class="{'active':item.id===activeChatId||item.isHovered}"
             @click="chatChange(item.id)"
             @mouseenter="handleMouseEnter($event,item)"
             @mouseleave="handleMouseLeave($event,item)"
             :key="index">
          <div class="left">
          <span class="icon-box">
            <img :src="chatIcon" alt="">
          </span>
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div class="chart-content">{{item.content}}</div>
            </div>
          </div>

          <div class="right">
            <span class="time">{{item.time}}</span>
            <div class="operation" v-if="item.id!==1&&item.type!=='smartRobot'"
                 :style="{display:item.id===activeChatId||item.isHovered?'block':'none'}">
              <el-icon color="#213F99" style="margin-right: 13px"><EditPen /></el-icon>
              <el-icon color="#213F99" @click="deleteChat(item)"><Delete /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="add-chat chat-action">
        <span @click="addChat">
         <el-icon><Plus /></el-icon>
         新建对话
        </span>
      </div>
      <el-divider direction="vertical" />
      <div class="delete-chat chat-action">
        <span>
          <el-icon><Delete  /></el-icon>
          批量删除
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive ,ref,watch,computed,defineEmits} from 'vue'
import { Search,EditPen,Delete,Plus } from '@element-plus/icons-vue'
import chatIcon from "@/assets/images/xiaoxi-active.svg"
import {storeToRefs} from "pinia";
import {useAiChatStore} from "@/store/useAiChatStore";
import {getUuid,getTimeByHHMMSS,getTimeByHHMM} from "@/utils/util";

const props = defineProps(['dataSource']);
const emit = defineEmits(['deleteChatItem','addChatItem','srollToBottom']);
// 注入共享状态或事件发射器

const store = useAiChatStore()
const {activeChatId} = storeToRefs(store);
let list = ref([])

watch(
    () => props.dataSource,
    (val) => {
      list.value=val
    },
    { immediate: true }
);
const filterList = computed(() => {
  const query = searchValue.value.toLowerCase()
  return list.value.filter(item => {
    return (
        item.title.toLowerCase().includes(query) ||
        item.content.toLowerCase().includes(query) ||
        item.time.includes(query)
    );
  });
});
const searchValue = ref('')
const addChat = () =>{
  const uuid = getUuid();
  let obj ={
    title:'新建对话',
    content:'',
    id:uuid,
    history:[],
    type:'newAddChat',
    time:getTimeByHHMM(),
  }
  emit("addChatItem", obj);

}
const chatChange = (id) =>{
  store.changeActiveChatId(id)
  emit("srollToBottom")
}

const deleteChat = (item) =>{
  emit("deleteChatItem",item)
}

const handleMouseEnter = (e,item) => {
  item.isHovered = true
};
const handleMouseLeave = (e,item) => {
  item.isHovered = false
};




</script>
<style scoped lang="less">
.list-wrapper{
  padding: 30px 0 0;
  box-sizing: border-box;
  background: #F9FCFC;
  border: 1px solid #EBEBEB;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    background: #F9FCFC;
    border-top: 1px solid #EBEBEB;

    .chat-action{
      flex: 1 !important;
      font-size: 14px;
      color: #3285FA;
      cursor: pointer;
      >span{
        //display: inline-block;
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin-left: 58px;
      }
    }
  }

  .top{
    padding: 0 21px;
    //flex: 1;

    .chart-list{
      max-height: 612px;
      overflow-y: auto;
    }
  }

  .chart-list{
    padding: 20px 0;

    display: flex;
    flex-direction: column;
    gap: 10px;

    .chart-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #FFFFFF;
      border-radius: 10px 10px 10px 10px;
      padding: 9px 16px;
      cursor: pointer;
      width: 406px;
      .left{
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .right{
        display: flex;
        align-items: center;
        gap: 13px;
      }

      .icon-box{
        display: inline-block;
        width: 42px;
        height: 42px;
        background: #EBF5FC;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;
        >img{
          width: 20px;
          height: 20px;
          line-height: 42px;
        }
      }

      .content{
        font-weight: 400;

        .title{
          color: #000000;
          font-size: 15px;
          margin-bottom: 6px;
          width: 229px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .chart-content{
          font-size: 13px;
          color: #747B8B;
          width: 229px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .time{
        font-size: 12px;
        color: #9AA1B2;
      }
    }
    .active{
      background: linear-gradient( 86deg, rgba(171, 167, 254, 0.25) 0%,
      rgba(66, 204, 225, 0.25) 100%);
      .content{
        .title{
          color: #296DF1;
        }
        .chart-content{
          color: #296DF1;
        }
      }
    }
  }

}
</style>